<template>
  <div class="refund-page">
    <div class="refund-card">
      <h2 class="title">申请退款</h2>

      <!-- 展示订单号 -->
      <div class="form-group">
        <label class="form-label">订单号</label>
        <div class="form-static">{{ refundForm.orderNo }}</div>
      </div>

      <!-- 展示退款金额 -->
      <div class="form-group">
        <label class="form-label">退款金额</label>
        <div class="form-static">¥ {{ refundForm.refundAmount }}</div>
      </div>

      <!-- 填写退款原因 -->
      <div class="form-group">
        <label class="form-label">退款原因</label>
        <textarea
          v-model="refundForm.refundReason"
          placeholder="请输入退款原因"
          class="form-textarea"
        ></textarea>
      </div>

      <!-- 按钮组 -->
      <div class="btn-group">
        <button class="btn btn-primary" @click="submitRefund">提交申请</button>
        <button class="btn btn-secondary" @click="resetForm">返回</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { refund } from '@/api/mall/alipayController'
const route = useRoute()
const router = useRouter()
const refundForm = reactive({
  orderNo: '',
  refundAmount: '',
  refundReason: ''
})

// 从路由参数获取订单信息
onMounted(() => {
  const { orderNo, payAmount } = route.query
  if (orderNo && payAmount) {
    refundForm.orderNo = orderNo
    refundForm.refundAmount = payAmount
  } else {
    alert('缺少订单信息，请从订单页面进入')
    goBack()
  }
})
  
  const resetForm=()=>{
router.push('/user/orders')
  }
// 订单号 & 退款金额来自父组件传参
const props = defineProps({
  orderId: {
    type: String,
    required: true
  },
  amount: {
    type: Number,
    required: true
  }
});

const reason = ref("");

const submitRefund = () => {
   const alipayRefundParams = {
   
        orderNo: refundForm.orderNo,
    refundAmount: refundForm.refundAmount,
    refundReason: refundForm.refundReason
    }
  const res=refund(alipayRefundParams)
  console.log(res.message);
  router.push('/user/orders')
};


</script>

<style scoped>
/* 页面整体居中 */
.refund-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f6f8fa;
  padding: 20px;
}

/* 卡片容器 */
.refund-card {
  background: #fff;
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 标题 */
.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

/* 表单项 */
.form-group {
  margin-bottom: 16px;
}

/* 标签 */
.form-label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: #555;
}

/* 固定值展示 */
.form-static {
  padding: 10px 12px;
  font-size: 14px;
  background: #f7f8fa;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  color: #333;
}

/* 多行输入 */
.form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* 输入框聚焦效果 */
.form-textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.3);
}

/* 按钮容器 */
.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* 按钮基础样式 */
.btn {
  flex: 1;
  padding: 10px 0;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
  border: none;
}

/* 主按钮 */
.btn-primary {
  background: #409eff;
  color: #fff;
}

.btn-primary:hover {
  background: #66b1ff;
}

.btn-primary:active {
  background: #3a8ee6;
}

/* 次按钮 */
.btn-secondary {
  background: #f2f3f5;
  color: #606266;
}

.btn-secondary:hover {
  background: #e5e6eb;
}

.btn-secondary:active {
  background: #dcdfe6;
}
</style>
